import React from "react"
class Copy extends React.Component {
    constructor() {
        super()
        this.state = {
            selVal: ""
        }
    }
    handlerCopy() {
        let value
        value = window.getSelection().toString()
        if (!value) {
            value = document.getElementById("context").innerText
        }
        //把内容写入剪贴板
        navigator.clipboard.writeText(value)
    }
    handlerPaste=()=> {
        navigator.clipboard.readText()
            .then(res => {
               this.setState({
                   selVal:res
               })
            })
    }
    componentDidMount(){
        document.onkeydown=function(e){
            e.preventDefault()
        }
        document.oncontentmenu=function(e){
            e.preventDefault()
        }
    }
    render() {
        return (
            <fieldset>
                <legend>复制粘贴板</legend>
                <p id="context">斗之力，三段！”
                    望着测验魔石碑上面闪亮得甚至有些刺眼的五个大字，少年面无表情，唇角有着一抹自嘲，紧握的手掌，因为大力，而导致略微尖锐的指甲深深的刺进了掌心之，带来一阵阵钻心的疼痛…

                    “萧炎，斗之力，三段！级别：低级！”测验魔石碑之旁，一位年男，看了一眼碑上所显示出来的信息，语气漠然的将之公布了出来…

                    年男话刚刚脱口，便是不出意外的在人头汹涌的广场上带起了一阵嘲讽的骚动。

                    “三段？嘿嘿，果然不出我所料，这个“天才”这一年又是在原地踏步！”

                    “哎，这废物真是把家族的脸都给丢光了。”

                    “要不是族长是他的父亲，这种废物，早就被驱赶出家族，任其自生自灭了，哪还有机会待在家族白吃白喝。”

                    “唉，昔年那名闻乌坦城的天才少年，如今怎么落魄成这般模样了啊？”

                    “谁知道呢，或许做了什么亏心事，惹得神灵降怒了吧…”

                    周围传来的不屑嘲笑以及惋惜轻叹，落在那如木桩待在原地的少年耳，恍如一根根利刺狠狠的扎在心脏一般，让得少年呼吸微微急促。
                </p>
                <div contentEditable suppressContentEditableWarning style={{ color: "deepskyblue", border: "1px solid yellow", height: "200px" }}>{this.state.selVal}</div>
                <button onClick={this.handlerCopy}>复制</button>
                <button onClick={this.handlerPaste}>粘贴</button>
            </fieldset>
        )
    }
}
export default Copy